<!-- 星星评分组件 -->
<template>
  <div>
    <div class="star mb-10" :class="starType">
        <span class="star-item" v-for = "(itemClass,key) in itemClassess" :key="key" :class="itemClass" track-by="$index"></span>
    </div>
  </div>
</template>

<script>
     const LENGTH = 5;//星星个数
     const CLS_ON = "on";//满星状态
     const CLS_HALF = "half";//半星状态
     const CLS_OFF = "off";//无星状态

    export default {
         props: {
            size: {
                type : Number//参数：尺寸
            },
            score: {
                type : Number//参数：评分
            }
         },
         computed: {
            starType(){//设置星星尺寸
                return "star-" + this.size;
            },
            itemClassess(){
                let result = [];//记录状态的数组
                let score = Math.floor(this.score * 2) / 2;
                let hasDecimal = score % 1 !==0;
                let integer = Math.floor(score);//向下取整
                //全星
                for(let i = 0; i < integer && score<=LENGTH; i++){
                    result.push(CLS_ON);
                }
                //半星
                if(hasDecimal){
                    result.push(CLS_HALF);
                }
                //无星
                //显示所有5颗星
                for(let i=0;i < LENGTH;i++){
                  if(result.length < LENGTH){
                      result.push(CLS_OFF);
                  }
                }
                //仅显示评分的星的颗数
                // if(result.length < LENGTH){
                //       result.push(CLS_OFF);
                //   }
                return result;
            }
         }
    }
</script>

<style scoped>
    .star {
        display: flex;
        width: 100%;
    }
    .star-48 .star-item {
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }
    .star-48 .star-item:last-child {
        margin-right: 0px;
    }
    .star-48 .star-item.on {
        background-image: url("../../../../static/images/classDetail/detail_star01.png");
    }
    .star-48 .star-item.half {
        background-image: url("../../../../static/images/classDetail/detail_star02.png");
    }
    .star-48 .star-item.off {
        background-image: url("../../../../static/images/classDetail/detail_star03.png");
    }

    .star-36 .star-item {
        width: 0.64rem;
        height: 0.64rem;
        margin-right: 0.25rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .star-36 .star-item:last-child {
        margin-right: 0;
    }
    .star-36 .star-item:last-child {
        margin-right: 0;
    }
    .star-36 .star-item.on {
        background-image: url("../../../../static/images/classDetail/detail_star01.png");
    }
    .star-36 .star-item.half {
        background-image: url("../../../../static/images/classDetail/detail_star02.png");
    }
    .star-36 .star-item.off {
        background-image: url("../../../../static/images/classDetail/detail_star03.png");
    }
</style>
